<template>
  <div class="content">
    <!-- 互动社区 顶部搜索栏 -->
    <div class="top-contain">
      <div class="logoBlock">
        <!-- <el-avatar :size="50"></el-avatar>
                <div>用户名</div> -->
        <h1>互动社区</h1>
      </div>
      <div class="searchQuestion">
        <el-input placeholder="搜索话题" class="input-with-select" v-model="keyWords" @keydown.enter.native="searchForumQuestion(keyWords)"> </el-input
        ><el-button slot="append" icon="el-icon-search" @click="searchForumQuestion(keyWords)">搜索</el-button>
      </div>
      <div class="writeQuestion">
        <el-button icon="el-icon-edit" id="btn_write" type="primary" @click="askQuestion()">话题发表</el-button>
      </div>
    </div>

    <div class="m-contain">
      <div class="hot-topic-list">
            <p id="hot-topic-title">热门话题</p>
            <ul v-for="hotTopic in hotTopicList" :key="hotTopic.id">
              <li><el-link :underline="false" :href="'/forum/' + hotTopic.id" style="text-decoration:none; font-size: 20px">{{hotTopic.title}}</el-link></li>
            </ul>
      </div>
      <div class="topic-list">
            <i class="el-icon-s-unfold"></i><span id="find-title">发现</span>
            <el-divider></el-divider>
            <div class="question" v-for="question in questionList" :key="question.id">
                <el-avatar shape="square" :size="80" :src="question.avatar"></el-avatar>
                <ul id="question-desc-list" style='list-style:none'>
                    <li id="question-title"><router-link :to="{path: '/forum/' + question.id}" style="text-decoration: none">{{question.title}}</router-link></li>
                    <!-- <li id="question-desc">{{question.description}}</li> -->
                    <li id="question-attention">{{question.commentCount}}个回复 ● {{question.viewCount}}次浏览 ● {{question.gmtModified}}</li>
                </ul>
            </div>
            <el-pagination
              background
              @size-change="siezChange"
              @current-change="currentChange"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
      </div>
      
    </div>
  </div>
</template>

<script>
import cookie from "js-cookie";
import forumApi from '@/api/forum'

export default {
  data() {
    return {
        // url: 'https://s1.ax1x.com/2023/04/03/pphIDK0.jpg',
        pageSize: 5,
        currentPage: 1,
        total: 0,
        questionList: [],
        hotTopicList: [],
        keyWords: ''
    };
  },

  created() {

    if (typeof(this.$route.query.searchKeyWords) == 'undefined') {
        this.getAllListByPage()
    } else {
        this.keyWords = this.$route.query.searchKeyWords
        this.questionListByKeyWords(this.keyWords, this.currentPage, this.pageSize)
    }

    // this.getAllListByPage()
    this.hotTopic('view_count')
  },

  methods: {
    searchForumQuestion(keyWords) {
      if (keyWords.length === 0) {
        return
      }
      this.questionListByKeyWords(this.keyWords, 1, 5)
    },

    hotTopic(condition) {
      forumApi.hotTopic(condition).then(response => {
        this.hotTopicList = response.data.data.hotTopicList
      })
    },

    siezChange(size) {
      this.pageSize = size;
      this.getAllListByPage();
    },
    currentChange(page) {
      this.currentPage = page;
      this.getAllListByPage();
    },

    questionListByKeyWords(keyWords, page, size) {
      forumApi.questionListByKeyWords(keyWords, page, size).then(response => {
        var data = response.data.data.maps
        this.questionList = data.list
        this.total = data.total
      })
    },

    getAllListByPage() {
      forumApi.getAllListByPage(this.currentPage, this.pageSize).then(response => {
        var data = response.data.data.maps
        this.questionList = data.list
        this.total = data.total
      })
    },

    askQuestion() {
      this.$router.push('/editQuestion')
      // this.$router.push('/blog')
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 28px;
  /* color: #7c7c7c; */
}

h2 {
  font-size: 20px;
  /* color: #7c7c7c; */
}

.content {
  /* 上 右 下 左 */
  margin: 10px 0px 0px 0px;
  /* padding-bottom: 100px; */
}

.top-contain {
  max-width: 1150px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  position: relative;
}
.logoBlock {
  width: 10%;
  padding: 5px;
  display: inline-block;
}
.searchQuestion {
  vertical-align: top;
  display: inline-block;
  position: absolute;
  left: 150px;
}
.el-input {
  /* 搜索框长度 */
  width: 300px;
  margin-right: 10px;
}
.writeQuestion {
  /* https://blog.csdn.net/qq_44131760/article/details/104755826  解释了为什么使用 vertical-align*/
  vertical-align: top;
  display: inline-block;
  position: absolute;
  right: 10px;
}

.m-contain {
  max-width: 1150px;
  margin: 0 auto;
  margin-top: 20px;
}

.topic-list {
    width: 70%;
}

.hot-topic-list {
    float: right;
    width: 28%;
}

.el-icon-s-unfold {
    font-size: 30px;
}

#find-title {
    margin-left: 10px;
    font-size: 30px;
    font-weight: bold;
}

#hot-topic-title {
    font-size: 30px;
    font-weight: bold;
}

.question {
    width: 100%;
    margin-bottom: 30px;
}

.el-avatar {
    border: 1px solid;
    border-radius: 5px;
}

#question-desc-list {
    list-style:none;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}

#question-title {
    font-size: 20px;
}

#question-desc {
    font-size: 18px;
}

#question-attention {
    font-size: 16px;
    color: #C0C0C0;
    margin-top: 20px;
}

.el-pagination {
  margin-top: 40px;
  margin-bottom: 40px;
}

</style>